<template>
  <div>
    <Row>
      <Col span="24">
        <Form ref="formInline" inline>
          <FormItem>
            <Button type="primary" @click="onClickSaveBlackAccountBtn">添加黑号</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>

    <Row>
      <Col span="24">
        <Table border :loading="loading" :columns="tbCol" :data="list" size="small">
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="onClickSaveBlackAccountBtn(row)">编辑</Button>
            <Button type="error" size="small" @click="onClickDeleteBlackAccountBtn(row)">删除</Button>
          </template>
        </Table>
      </Col>
    </Row>

    <div class="clear-10"></div>
    <Row>
      <Col span="24">
        <Page :total="total" :page-size="pageSize" show-total @on-change="pageChange" />
      </Col>
    </Row>

    <Modal
      v-model="saveModel.show"
      :loading="saveModel.loading"
      :title="saveModel.title"
      class-name="staff-modal"
      @on-cancel="cancelModal"
      @on-ok="saveBlackAccount('blackAccountForm')">
      <Form ref="blackAccountForm" :model="blackAccountForm" :rules="ruleValidate" :label-width="80">
        <FormItem label="账号" prop="account">
          <Input v-model="blackAccountForm.account" placeholder="请输入账号"></Input>
        </FormItem>
        <FormItem label="所属游戏">
          <Select v-model="blackAccountForm.gameId" style="width: 200px">
            <Option v-for="item in gameList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>

    <Modal
      v-model="delModel.show"
      title="提示"
      class-name="del-modal"
      @on-ok="delBlackAccount">
      <p>确定要删除该账号么?</p>
    </Modal>
  </div>
</template>

<script>

  import Core from 'core/core'

  export default {
    data() {
      return {
        Core: Core,
        loading: true,
        tbCol: [
          {title: 'ID', key: 'id', width: '100px'},
          {title: '账号', key: 'account'},
          {title: '所属游戏', key: 'game_name'},
          {title: '操作', slot: 'action', width: 150, align: 'center'}
        ],
        gameList: [],
        list: [],
        currentPage: 1,
        total: 0,
        pageSize: 10,

        blackAccountForm: {
          id: 0,
          account: '',
          gameId: ''
        },
        ruleValidate: {
          account: [
            {required: true, message: '账号不能为空', trigger: 'blur'}
          ],
        },
        saveModel: {
          show: false,
          title: '',
          loading: true
        },
        delModel: {
          show: false,
          id: 0
        }
      }
    },
    mounted() {
      this.getGameList()
      this.getBlackAccountList()
    },
    methods: {
      getGameList() {
        Core.Api.Game.list({})
          .then(res => {
            this.gameList = res.list
          })
      },
      getBlackAccountList() {
        this.loading = true
        Core.Api.BlackAccount.list({})
          .then(res => {
            this.loading = false
            this.list = res.list
            this.total = res.count
          })
      },
      pageChange (page) {
        this.currentPage = page
        this.getBlackAccountList()
      },
      onClickSaveBlackAccountBtn(item) {
        this.saveModel.title = item.id ? '编辑黑号' : '添加黑号'
        this.blackAccountForm = {
          id: item.id ? item.id : 0,
          account: item.id ? item.account : '',
          gameId: item.id ? item.game_id : ''
        }
        this.saveModel.show = true
      },
      onClickDeleteBlackAccountBtn(item) {
        this.delModel.id = item.id
        this.delModel.show = true
      },
      cancelModal() {
        this.$refs.blackAccountForm.resetFields()
      },
      saveBlackAccount(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            let id = this.blackAccountForm.id
            let data = {
              id: this.blackAccountForm.id,
              account: this.blackAccountForm.account,
              gameId: this.blackAccountForm.gameId
            }

            Core.Api.BlackAccount.save(data).then(() => {
              this.$Message.success(id ? '修改成功！' : '添加成功！')
              this.getBlackAccountList()
              this.saveModel.show = false
            }).catch(err => {
              this.saveModel.loading = false
              setTimeout(() => {
                this.saveModel.loading = true
              })
            })
          } else {
            this.saveModel.loading = false
            setTimeout(() => {
              this.saveModel.loading = true
            })
          }
        })
      },
      delBlackAccount() {
        let data = {
          id: this.delModel.id
        }
        Core.Api.BlackAccount.delete(data)
          .then(() => {
            this.$Message.success('删除成功！')
            this.getBlackAccountList()
          }).catch(err => {
          this.$Message.error(err.msg)
        })
      }
    }
  }
</script>

<style lang="less" scoped>

</style>
